<template>
  <div class="revise-box" teleport="body">
    <h1>编辑工种</h1>
    <el-form
      ref="ruleFormRef"
      :model="form"
      status-icon
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="名称" prop="jobsnames">
        <el-input v-model="form.jobsnames" autocomplete="off" />
      </el-form-item>

      <hr />
    </el-form>

    <span class="dialog-footer">
      <el-button type="primary" @click="saveFn">保存</el-button>
      <el-button @click="cancelFn"> 取消 </el-button>
    </span>
  </div>
</template>
  
  <script setup lang="ts">
import service from "../../../utils/service";
import { reactive, ref, watch } from "vue";
import { ElMessage } from "element-plus";


// 声明属性
const props = defineProps<{
  id: number;
  jobsnames:string
}>();

// 声明事件
const emit = defineEmits<{
  (e: "hide"): void;
  (e: "updatesuccess"): void;
}>();
const cancelFn = () => {
  //触发隐藏事件
  emit("hide");
};

interface IForm {
  id: number;
  jobsnames: string;
}

//当前人员的数据
const form = reactive<IForm>({
  id: "",
  jobsnames: "",
});
//获取当前数据
const getAdminDetail = () => {
  service({
    url: "/jobslist",
    params: {
      id: props.id,
    },
  }).then((res) => {
    // if(res.data.code === "200"){
    form.jobsnames = res.data[0].jobsnames;

    // }
  });
};

watch(
  props,
  () => {
    getAdminDetail();
    // ruleForm.
  },
  {
    deep: true,
  }
);
//编辑并提交
const saveFn = () => {
  if (!form.jobsnames) {
    ElMessage({
      message: "请输入修改内容",
      type: "warning",
    });
  }
  service({
    url: "jobslist/" + props.id,
    method: "patch",
    data: {
      jobsnames:form.jobsnames
    }
  }).then((res) => {
    // if(res.data.code==="200"){
    ElMessage({
      message: "编辑成功",
      type: "success",
    });
    emit("hide"); //关闭编辑窗口
    emit("updatesuccess");
    // }
  });
};
</script>
  
  <style scoped>
.revise-box {
  width: 400px;
  height: 150px;
  border: 1px solid #e5e4e4;
  position: fixed;
  left: 35%;
  top: 40%;
  background-color: #ededed;
  z-index: 9999;
  text-align: center;
}
/* .revise-box .dialog-footer {
  position: absolute;
  left: 350px;
  top: 250px;
} */
</style>